<template>
  <!--课程列表页-->
  <div>
    <a-card class="contentFullHeight" :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline" enctype="multipart/form-data">
          <a-form-item label="课程名">
            <a-input style="width: 150px" v-model="searchParams.courseName"></a-input>
          </a-form-item>
          <a-form-item label="课程类型">
            <a-select v-model="searchParams.courseType">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.id" v-for="item in typeList">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <!--<a-form-item label="上传时间">-->
          <!--<a-range-picker-->
          <!--v-model="searchParams.rangeDate"-->
          <!--:disabledDate="disabledDate"-->
          <!--format="YYYY-MM-DD"-->
          <!--/>-->
          <!--</a-form-item>-->
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>

          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="file" :loading="downloadLoading">导入</a-button>-->
          <!--</a-form-item>-->
          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="download" @click="handleDownload">导出</a-button>-->
          <!--</a-form-item>-->
          <a-form-item>
            <!--新增-->
            <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!--列表-->
      <a-table
        bordered
        rowKey="id"
        size="small"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        :pagination="pagination"
        @change="getTableData"
      >
        <template slot="type" slot-scope="text">
          <a-tag color="green" v-if="text == '0'">上架</a-tag>
          <a-tag color="red" v-if="text == '1'">下架</a-tag>
        </template>

        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              @confirm="updateForType(record)"
              okText="确认"
              cancelText="取消"
            >
              <template slot="title">
                {{ record.type === 0 ? '确认下架?' : '确认上架?' }}
              </template>
              <a href="javascript: void(0);">
                {{ record.type === 0 ? '下架' : '上架' }}
              </a>
            </a-popconfirm>
            <a-divider type="vertical"/>
            <a @click="handleUpdate(record)" href="javascript: void(0);">编辑</a>
            <a-divider type="vertical"/>
            <a @click="chaptersShow(record)" href="javascript: void(0);">章节</a>
            <a-divider type="vertical"/>
            <a-popconfirm
              placement="left"
              title="确认删除?"
              @confirm="confirmDelete(record.id)"
              okText="确认"
              cancelText="取消"
            >
              <a href="javascript: void(0);">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <CouresPopup :mdl="mdl" @handleSearch="handleSearch" :typeList="typeList"/>
      <!--章节弹窗-->
      <Chapter :wrapHeight="360" :clickBtn="true" :mdl="mdlChapter" @handleSearch="handleSearch"></Chapter>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import Chapter from './chapter'
import CouresPopup from './couresPopup'

import { queryCouresList, couresDelete, courseTypequery, updateForType } from '@/api/courseManage/courseManage'

const columns = [
  {
    title: '课程名',
    dataIndex: 'courseName'
  },
  {
    title: '课程类型',
    dataIndex: 'courseType'
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime'
  },
  {
    title: '浏览量',
    dataIndex: 'pageViews'
  },
  {
    title: '积分',
    dataIndex: 'integral'
  },
  {
    title: '总学时',
    dataIndex: 'period'
  },
//  {
//    title: '完成率',
//    dataIndex: 'compleRate'
//  },
  {
    title: '上下架状态',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '250px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
    CouresPopup,
    Chapter
  },
  data () {
    return {
      searchParams: {
        courseName: '',
        courseType: ''
        //        rangeDate: [moment().subtract(6, 'days'), moment()],
        //        name: ''
      },
      /*   -------分页-------- */
      pagination: this.$defaultSettings.pagination,
      //      弹窗
      mdl: {
        dialogStatus: '',
        dialogTitleMap: {
          update: '编辑',
          create: '添加'
        },
        visible: false,
        title: '',
        formData: {
          id: '',
          courseName: '',
          integral: '',
          courseInfo: '',
          courseType: '',
          fileNo: ''
        },
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        formItemLayoutWithOutLabel: {
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 }
          }
        }
      },
      mdlChapter: {
        visible: false,
        id: ''
      },
      /*   -------表格-------- */
      loading: false,
      columns,
      tableData: [],
      downloadLoading: false,
      typeList: []// 课程类型
    }
  },
  created () {
    this.getTypeList()
  },
  mounted () {
    this.getTableData(this.pagination)
  },
  methods: {
    //      获取课程类型
    getTypeList () {
      const parameter = {
        _search: false, // 是否分页查询
        pageSize: '',
        pageNumber: '',
        data: {
          courseCount: '',
          id: '',
          name: '',
          remake: ''
        }
      }
      courseTypequery(parameter).then(res => {
        this.typeList = res.data.records
      }).catch()
    },
    // disabledDate (current) {
    //   return current && current > moment().endOf('day')
    // },
    //    获取列表
    getTableData (pagination) {
      if(pagination!=undefined && pagination!='' && pagination!=null) {
        this.pagination = pagination
      }
      this.loading = true
      const parameter = {
        _search: true,
        'bgTm': '',
        'courseName': this.searchParams.courseName,
        'courseType': this.searchParams.courseType,
        'endTm': '',
        pageSize: this.pagination.pageSize || 10,
        pageNumber: this.pagination.current || 1
      }
      queryCouresList(parameter).then(res => {
        this.loading = false
        this.pagination.total = res.data.total
        this.tableData = res.data.records
      }).catch(() => {
        this.loading = false
      })
    },
    //    查询
    handleSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 10
      this.getTableData()
    },
    //    清空
    setDefaults () {
      this.mdl.formData = {
        id: '',
        courseName: '',
        integral: '',
        courseInfo: '',
        courseType: '',
        fileNo: ''
      }
    },
    // 添加行
    handleCreate () {
      this.setDefaults()
      this.mdl.dialogStatus = 'create'
      this.mdl.visible = true
    },
    // 编辑当前行
    handleUpdate (row) {
      this.mdl.formData = Object.assign({}, row)
      this.mdl.formData.courseType=this.mdl.formData.courseTypeId
      this.mdl.dialogStatus = 'update'
      this.mdl.visible = true
    },
    //    删除
    confirmDelete (id) {
      if (!id) {
        this.upShow(0, 'id不能为空')
        return
      }
      couresDelete(id).then(({ code, msg }) => {
        if (code === 200) {
          this.$message.success('删除成功')
          this.getTableData()
        } else {
          this.$message.error(msg || '删除失败')
        }
      })
    },
    // 上下架
    updateForType (row) {
      const { id, courseInfoId, type, compleRate, pageRank, pageViews } = row
      if (!id) {
        this.$message.info('id不能为空')
        return
      }
      if (!courseInfoId) {
        this.$message.info('cid不能为空')
        return
      }
      const param = {
        id: courseInfoId,
        pid: id,
        type: type === 0 ? 1 : 0,
        compleRate,
        pageRank,
        pageViews,
        createTime: moment().format('YYYY-MM-DD HH:mm:ss')
      }
      const text = type === 1 ? '上架' : '下架'
      updateForType(param).then(({ code, msg }) => {
        if (code === 200) {
          this.$message.success(`${text}成功`)
          this.getTableData()
        } else {
          this.$message.error(msg || `${text}失败`)
        }
      })
    },
    // 下载
    handleDownload () {
      const { sortField, sortOrder, courseName, courseType, rangeDate } = this.searchParams
      const param = {
        courseType,
        courseName,
        sortField,
        sortOrder,
        bgTm: rangeDate[0] ? rangeDate[0].format('YYYY-MM-DD') : '',
        endTm: rangeDate[1] ? rangeDate[1].format('YYYY-MM-DD') : ''
      }
      console.log(param)
    },
    //    章节弹窗
    chaptersShow (row) {
      this.mdlChapter.visible = true
      this.mdlChapter.id = row.id
    }
  }
}
</script>
